<template>
  <view class="page-content-box">
    <!-- 头部导航 -->
    <xr-nav-bar title="作文宝" :slotPattern="slotPattern" />
    <view @click="searchClick" class="search-site">
      <search-bar @confirm="search" @input="input" :inputDisabled=true placeholder="点击查询范文、素材"></search-bar>
    </view>

    <view class="page-box">
      <view class="title-box flex">
        <text class="title-text zw-default-text1 f16">精选范文</text>
        <text>课堂内外独家</text>
      </view>
      <model-essay :modelEssayList="modelEssayList" />
    </view>

    <view class="page-box textbook-writing-box">
      <view class="title-box flex flex-between">
        <text class="title-text zw-default-text1 f16">教材同步作文</text>
        <view class="select-box" @click="open">
          <text v-if="curBookInfo.gradeName">{{curBookInfo.gradeName}}{{curBookInfo.schoolName}}</text>
          <text v-else>请选择年级学期</text>
          <text class="iconfont zw-down-sanjiao ic-snajiao" />
        </view>
      </view>
      <textbook-writing :textbookWritingList="textbookWritingList" />
    </view>

    <view v-if="showBookWrap && 0" class="test-input">
      <input v-model="inputBookId" class="uni-input book-id" :placeholder="placeholderText">
      <view class="input-list">
        <button @click="testJumpToBook(1)">范文</button>
        <button @click="testJumpToBook(2)">素材</button>
      </view>
    </view>

    <selectInfoPopup ref="selectInfoPopup" :popupType="popupType"/>
  </view>
</template>

<script>
import { mapState } from 'vuex'
import searchBar from '@/components/search-bar'
import selectInfoPopup from '@/components/select-info-popup'
import { modelEssay } from './components/model-essay'
import { textbookWriting } from './components/textbook-writing'
import { modelEssayList, textbookWritingList } from './zuwen'

export default {
  components: {
    searchBar,
    modelEssay,
    textbookWriting,
    selectInfoPopup
  },
  data () {
    return {
      runtimeValue: {
        value: '0',
        checked: false
      },
      inputBookId: '',
      loading: true,
      online: 0, // 方便线上其他人
      modelEssayList: modelEssayList,
      textbookWritingList: textbookWritingList,
      curBookInfo: {
        gradeName: '',
        schoolName: ''
      },
      slotPattern: 'left',
      popupType: 'bottom'
    }
  },
  computed: {
    ...mapState(['ad', 'userInfo', 'env']),
    showBookWrap () {
      if (this.env.isDev || this.env.isH5Test || this.online) {
        return true
      }
      if (this.userInfo && Object.keys(this.userInfo).length) {
        const phones = ['13918553295', '15921257835', '17612173980', '18789063027', '17539611125', '17623809060']
        if (this.userInfo.phone) {
          for (const phone of phones) {
            if (this.userInfo.phone === phone) {
              return true
            }
          }
        }
      }
      return false
    },
    placeholderText () {
      const txt = '测式环境 书籍ID 或 聚和页ID'
      const txt2 = '线上环境 书籍ID 或 聚和页ID'
      if (this.env.isH5) {
        if (this.env.isH5Test) {
          return txt
        }
      } else if (this.env.isWeixin) {
        if (this.env.isDev) {
          return txt
        }
      }
      return txt2
    }
  },
  onLoad (options) {
    this.online = Number(options.online) || 0
  },
  async onShow () {
    // this.init()
  },
  methods: {
    searchClick () {
      uni.navigateTo({
        url: '/pages/search-page/index?id=1&name=uniapp'
      })
    },
    open () {
      this.$refs.selectInfoPopup.open()
    },
    init () {
      this.$api.book.getHomePageBanner()
      this.$api.book.getBookScanRecord().then(res => {
        if (res.length) {
          res.forEach(it => {
            if (it.bookPicture) {
              it.bookPicture = it.bookPicture + '?x-oss-process=image/resize,w_150'
            }
          })
          this.historyBookList = res
        }
        this.loading = false
      }).finally(() => {
        this.loading = false
      })
    },
    getRuntimeValue (event) {
      console.log(event)
      if (event && event.detail) {
        if (event.detail.value[0] === '0') {
          this.runtimeValue = {
            value: '1',
            checked: true
          }
          this.$store.commit('setRuntime', 0)
        } else {
          this.runtimeValue = {
            value: '0',
            checked: false
          }
          this.$store.commit('setRuntime', 1)
        }
      }
      console.log(this.runtimeValue)
    },
    testJumpToBook (type) {
      if (!this.inputBookId) {
        return uni.showToast({ icon: 'none', title: '请输入ID' })
      }
      console.log(1111)
      if (type === 1) {
        uni.navigateTo({
          url: `/pages/book/index/index?bookId=${this.inputBookId}`
        })
      } else if (type === 2) {
        uni.navigateTo({
          url: `/pages/study-package/index/index?bookId=${this.inputBookId}`
        })
      } else {
        uni.navigateTo({
          url: `/pages/aggregation/index?id=${this.inputBookId}`
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
@import "./index.scss";
.test-input {
  border: 1px solid red;
  padding: 17px 17px 10px 17px;
  .input-list {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-bottom: 10px;
    button {
      font-size: 12px;
      max-width: 120px;
    }
  }
  input {
    border: 1px solid #eee;
    padding: 5px;
    margin-bottom: 5px;
  }
}
</style>
